﻿@model IEnumerable<Testicide.Models.Feature>

@{
    ViewBag.Title = "Index";
}

<div class="order">
        @if(ViewBag.Message=="yes")
        {
            <h3 style="margin-left:10px;">@ViewBag.ModuleName</h3>
        }
        <p><b>Click on a Feature to add Scenario</b></p>
        <table class="table table-hover">
            <tr>
                <th>
                    Create Feature
                    <a id="openDialog" href="@Url.Action("AddEditRecord", "Feature", new { modID = ViewBag.ModuleID })">
                        <img id="add" style="width:25px; height:25px;margin-left:20px;" src="~/pictures/addnew.png" />
                    </a>
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Date)
                </th>
                @if (ViewBag.Message == "No")
                    {
                    <th>@Html.DisplayNameFor(model => model.ModuleID)</th>
                    }
                
                <th>
                    @Html.DisplayNameFor(model => model.Status)
                </th>
                <th>
                    @using (Html.BeginForm("Search", "Feature"))
                        {
                        <input id="searchtxt" name="searchString" type="text" />
                        <button style="width: 20px; height: 20px; border:none; background-color:white;"><img id="search" style="width:20px; height:20px; background-color:none; border:none;" src="~/pictures/search.png" /></button>
                        }
                </th>
            </tr>
        
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        <a href="@Url.Action("Tool_Box","Scenario", new { id=item.ID })">
                            @Html.DisplayFor(modelItem => item.Name)
                        </a>
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Date)
                    </td>
                    @if (ViewBag.Message == "No")
                        {
                        <td>@item.ModuleID</td>
                        }
                    <td>
                        @item.Status
                    </td>
                    <td>
                        <a class="editDialog" id="editFeature_@item.ID" href="@Url.Action("AddEditRecord", "Feature", new { id = item.ID, modID = item.ModuleID })">
                            <img class="icons" src="~/pictures/edit.png" /> |
                        </a>
                        <a class="confirmDialog" id="deleteFeature_@item.ID" href="@Url.Action("DeleteRecord", "Feature", new { id = item.ID })">
                            <img class="icons" src="~/pictures/delete.png" />
                        </a>
                    </td>
                </tr>
            }
        </table>
    </div>

    <div id="dialog-confirm" style="display: none">
        <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
            Are you sure to delete this Feature with all its Scenarios ?
        </p>
    </div>
    <div id="dialog-edit" style="display: none">

    </div>
    <div id="dialog-view" style="display: none">

    </div>

@section Scripts
{
   <script type="text/javascript">
    $(document).ready(function () {
        $.ajaxSetup({ cache: false });
        $("#openDialog").click(function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Create Feature',
                autoOpen: false,
                resizable: false,
                height: 355,
                width: 400,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);
                },
                close: function (event, ui) {
                    $(this).dialog('close');
                    location.reload(true);
                }
            });

            $("#dialog-edit").dialog('open');
            return false;
        });

        $(".editDialog").click(function (e) {
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Edit Feature',
                autoOpen: false,
                resizable: false,
                height: 355,
                width: 400,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);
                },
                close: function (event, ui) {
                    $(this).dialog('close');
                    location.reload(true);
                }
            });
            $("#dialog-edit").dialog('open');
            return false;
        });

        $(".confirmDialog").click(function (e) {
            var url = $(this).attr('href');
            $("#dialog-confirm").dialog({
                autoOpen: false,
                resizable: false,
                height: 180,
                width: 350,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                buttons: {
                    "OK": function () {
                        //location.reload(true);
                        $(this).dialog("close");
                        window.location = url;
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
            $("#dialog-confirm").dialog('open');
            return false;
        });
    });

    function closedialog() {
        $("#dialog-edit").dialog("close");

    }
        $(document).ready(function () {
            $('#searchtxt').autocomplete({
                source: '@Url.Action("AutoComplete")'
            });
                })
    </script>
}